concrete5のSNS認証機能を試してみた
事業開発部の酒匂です。concrete5のダッシュボード画面（＝管理画面）に「認証タイプ」というメニューがあることに気付きましたので、試してみました。
前提条件
- concrete5がサーバー上にインストールされていること
SNS認証機能とは？
concrete5で会員認証を必要とするサイトを作成する場合に、認証手段としてconcrete5で管理するIDとパスワードによるものの他に、SNSアカウントでの認証を可能にするものです。
ダッシュボードメニューの「システムと設定」 > 「ログインとユーザー登録」 > 「認証タイプ」にて設定します。
標準でサポートされているSNSは下記の通り、Twitter, Facebook, Googleです。 その他はconcrete5内部で管理するIDとパスワードによる認証と、concrete5のコミュニティサイトの会員情報による認証です。
ドキュメントによると認証機能を追加できるようですが、それは機会がありましたらトライしてみたいと思います。
Advanced: Creating a Custom Authentication Type
SNS認証機能のセットアップ
今回はTwitterで試してみたいと思います。
1. Twitter開発者サイトにてアプリケーションの登録
https://developer.twitter.com/へアクセスしてログインします。アカウントが無い場合は作成します。
ログイン後、右上のメニューにある「Apps」を選択します。
既にアプリ登録をしている場合は、下記のように登録済みのものが表示されます。今回は新規にアプリ登録をするので、右上にある「Create an app」を選択します。
下記のように入力画面が表示されます。requiredとなっている項目を入力します。
| 項目 | 内容 |
|---|---|
| App Name | Twitter認証を行うアプリケーションの名称を入力します。 |
| Application Description | アプリケーションの説明を英語で10文字以上入力します。 |
続いて、残りのrequired項目も入力していきます。
| 項目 | 内容 |
|---|---|
| App Name | Twitter認証を行うアプリケーションのトップページのURLを入力します。 |
| Enable Sign in with Twitter | チェックをつけます。 |
| Callback URLs | Twitterの画面での認証が完了すると、アプリケーション側のURLにリダイレクトされます。そのリダイレクト先を指定します。複数存在する場合は、「+Add another」をクリックして追加します。concrete5の場合は下記の「アプリケーションがconcrete5の場合に指定するCallback URLsについて」を参照ください。 |
アプリケーションがconcrete5の場合に指定するCallback URLsについて
concrete5のダッシュボードメニューの「システムと設定」 > 「ログインとユーザー登録」 > 「認証タイプ」 > 「Twitter」の画面上に記載されているURLを指定してください。
入力項目ですが、もう少し続きます。
| 項目 | 内容 |
|---|---|
| Tell us how this app will be used | Twitter認証を行うアプリケーションの用途を英語で100文字以上入力します。 |
「Create」を選択します。
2. API keyとAPI secret keyの確認
アプリケーションが登録されると、下記のような画面に遷移します。 タブメニューの「keys and tokens」を選択します。
画面上の「API key」と「API secret key」の値を控えておきます。
3. concrete5への設定
「API key」と「API secret key」の値は、concrete5のダッシュボードメニューの「システムと設定」 > 「ログインとユーザー登録」 > 「認証タイプ」 > 「Twitter」の画面上に入力します。入力したら、「保存」＆「有効」にします。
有効になると、下記のようにTwitterの行が緑色になります。
以上で設定は完了です。
SNS認証機能の動作確認
1. concrete5のログイン画面を表示＆Twitterでログイン
concrete5のログイン画面にアクセスします。Twitterが追加されておりますので、選択してみます。
「Twitterでログイン」ボタンを選択します。Twitterの画面へ遷移しますので、認証情報を入力します。
2. concrete5に登録されているユーザーアカウントとTwitterアカウントの紐付けが必要
Twitterでの認証が完了してconcrete5に戻ってきたら、下記の通りエラーです。これはTwitter認証を使うには、まずはconcrete5にユーザーアカウントを登録し、そのアカウントにTwitterアカウントを紐付けないといけないからです。
というわけでユーザーアカウントを登録します。今回は便宜上、ダッシュボード画面上からアカウントを登録します。 ダッシュボード画面メニューの「メンバー」 > 「ユーザー検索」を選択します。画面上の「ユーザーを追加」を選択します。
必要情報を入力していきます。
ユーザーを追加できました。
再度concrete5のログイン画面を表示します。まずは「標準」、つまりはconcrete5に登録されているユーザーアカウントでの認証を行います。先ほど登録したユーザーIDとパスワードを入力します。
マイページのメニューにある「プロフィール編集」を選択します。
「認証タイプ」にある「Twitterアカウントを接続」を選択します。Twitterの画面へ遷移しますので、認証情報を入力します。
Twitterでの認証が完了して、concrete5の画面へ戻ってきました。ユーザーアカウントとTwitterアカウントをリンクできました。
3. 会員専用ページを用意する
次に動作確認用に、ログインしていないと表示できないページを作成します。「ホーム」直下に「demo」というページを作成します。
こんな感じで画面上に何か文字を記載しておくため、画面を編集しておきます。 （concrete5は、このように画面を直接編集できます）
ページを編集したら、先ほど追加した「ホーム」直下の「demo」を選択して、メニューから「権限」を選択します。
「誰がこのページを表示できますか？」を「登録ユーザー」と「管理者」にします。 「変更を保存」ボタンを選択します。
4. SNS認証確認と会員専用ページの表示確認
ログインしていない状態だと、先ほど追加した「demo」メニューは表示されません。
ログイン画面を表示し、Twitterでログインします。
Twitterでの認証が完了したら、今度は無事にconcrete5のマイページが表示されました。 「前のページに戻る」を選択します。
「demo」メニューが表示されました。ページが表示されるかも確認するため、「demo」を選択します。
ちゃんとページも表示されました。
さいごに
例えばウェブサイト毎に会員情報を管理していて、SNSについてはログインだけできれば良いという要件ならば、今回のようにCMSにSNS認証機能があれば、設定ベースで導入可能かと思います。Twitter, Facebook, Googleといった代表的なサービスをサポートしているのも、ありがたいです。
もし、自社のウェブサイトや他社のウェブサイトをまたがって会員情報を管理したり、SNS認証の際に発行されるアクセストークンを使って得られる情報を取得したいという場合には、それなりにカスタマイズが必要になったり、他の手段を検討する必要があると思います。
